<template>
	<view class="">
		<view class="chart-box" :style="{'background':`${colorObject.bgColor}`}">
			<view class="chart-information">
				<view class="chart-name">
					{{allData.indicName}}
				</view>
				<view class="measurement-time">
					{{allData.recordTime |time_fliter('YYYY.MM.DD')}}
				</view>
			</view>
			<view class="charts-box-f2">
				<l-f2 ref="chart"></l-f2>
			</view>
			<view class="record-value">
				 <!-- v-show="allData.firstValue" -->
				<text :style="{'color':allData.indicStatus==1 || allData.indicStatus==0?'#4A4A4A':'#FF333A'}" class="max-num">{{allData.itemCode==='SLEEP'?(allData.firstValue/60).toFixed(1):allData.firstValue || '--'}}</text>
				<text :style="{'color':allData.indicStatus==1 || allData.indicStatus==0?'#4A4A4A':'#FF333A'}" class="min-num" v-show="allData.secondValue">/{{allData.secondValue}}</text>
				<text class="company" v-show="allData.unit">{{allData.unit || '--'}}</text>
				<text class="company" v-show="allData.itemCode=='FOUR_ITEMS_BLOOD_LIPID'">总胆固醇</text>
			</view>
		</view>

	</view>
</template>

<script>
import F2 from '@/uni_modules/lime-f2/components/l-f2/f2-all.min.js';
import lF2 from '@/uni_modules/lime-f2/components/l-f2/l-f2.vue';
	import dayjs from '@/common/utils/day/day.js'
	export default {
		name: 'blood-pressure', //健康卡片
		components: {
			lF2
		},
		props: {
			bgColor: {
				type: String,
				default: '#fff'
			},
			name: {
				type: String,
				default: '名称'
			},
			//整体数据
			data: {
				type: Object,
				default: () =>({}) 
			},
			colorObject:{
				type: Object,
				default: () =>({}) 
			}
		},
		filters: {
			time_fliter: function(value, format, customReturnValue) {
				let currentFormat = 'YYYY-MM-DD';
				if (format) {
					currentFormat = format;
				}
				if (customReturnValue) {
					if (dayjs().format('YYYY-MM-DD') == dayjs(value).format('YYYY-MM-DD')) {
						return '今天'
					} else {
						return dayjs(value).format(currentFormat);
					}
				} else {
					return dayjs(value).format(currentFormat);
				}

			}
		},
		watch: {
			data(newValue, oldValue) {
				this.allData = newValue;
				this.formatData()
			}
		},
		data() {
			return {
				allData: this.data, //所有数据
				list: []
			}
		},
		mounted() {
			this.formatData()
			this.init()

		},
		methods: {
			//格式化数据
			formatData() {
				let list = [];
				this.allData.userIndicatorsDataList.forEach((item, index) => {
					if (item.firstValue !== null) {
						list.push({
							xId: index,
							type: 'lou',
							value: item.firstValue
						})
					}

					if (item.secondValue !== null) {
						list.push({
							xId: index,
							type: 'lou2',
							value: item.secondValue
						})
					}
				})
				this.list = list;
				console.log(this.list, 'this.list')
			},


			init() {
				this.$refs.chart.init(config => {
					config.appendPadding = [0, 0, 0, 0]
					const chart = new F2.Chart(config)
					chart.source(this.list);
					// 为指定的数据字段进行列定义。
					chart.scale({
						time: {
							type: 'timeCat',
							tickCount: 3, // 坐标轴上刻度点的个数，不同的度量类型对应不同的默认值。
						}
					});
					chart.axis('xId', {
						line: {
							lineWidth: 1,
							stroke: '#ebebeb'
						},
						label: function label(text, index, total) {
							const textCfg = {
								fontSize: 12,
								lineHeight: 17
							};
							if (index === 0) {
								textCfg.textAlign = 'left';
							} else if (index === total - 1) {
								textCfg.textAlign = 'right';
							}
							return textCfg;
						},
						labelOffset: 6, // 坐标轴文本距离轴线的距离
					});
					chart.axis('value', {
						labelOffset: 6, // 坐标轴文本距离轴线的距离
						label: () => {
							const cfg = {
								fontSize: 12,
								lineHeight: 17,
								fill: '#999'
							}
							return cfg;
						},
						grid: {
							stroke: '#eee'
						}
					});
					chart.legend(false)
					// 自定义tooltip
					chart.tooltip(false)
					chart.axis(false)
					// chart.area().position('xId*value').color('l(90) 0:#3f7ae8 1:#fefefe').shape('smooth');
					// chart.line().position('xId*value').color('#3f7ae8').shape('smooth');

					// chart.area().position('xId*value').color('type', [`l(90) 0:${this.allData.backgroundOne} 1:#FFFFFF`]).shape(
					// 'smooth');
					chart.area().position('xId*value').color('type',[this.colorObject.lineBgColor] ).shape(
					'smooth');
					chart.line().position('xId*value').color('type',[this.colorObject.oneColor,this.colorObject.twoColor]).shape('smooth');

					chart.render();
					return chart
				})
			},

		}
	}
</script>

<style lang="scss">
	.chart-box {
		min-height: 340rpx;
		width: 344rpx;
		// background: linear-gradient(180deg, #FDF8F1 0%, #FCEACB 100%);
		box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(173, 173, 173, 0.25);
		// background: #ffffff;
		border-radius: 40rpx;
		position: relative;
		margin-bottom: 36rpx;

		.chart-information {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 22rpx 30rpx;

			.chart-name {
				font-size: 32rpx;
				font-weight: 800;
				color: #000000;
			}

			.measurement-time {
				font-size: 22rpx;
				font-weight: 500;
				color: #9B9B9B;
			}
		}

		.charts-box-f2 {
			width: 344rpx;
			// height: 250rpx;
			height: 180rpx;
			// background-color: aqua;
		}

		.record-value {
			position: absolute;
			left: 34rpx;
			bottom: 30rpx;
			font-weight: 600;

			.max-num {
				font-size: 44rpx;
				color: #FF333A;
			}

			.min-num {
				font-size: 44rpx;
				color: #4A4A4A;
			}

			.company {
				font-size: 22rpx;
				color: #9B9B9B;
				margin-left: 10rpx;
			}
		}

	}
</style>
